<template>
    <div>
        <div>
            <div style="display: flex;justify-content: space-between;">
                <div>
                    <el-input size="small" style="width: 400px;margin-right: 20px"
                              v-model="emname" @keydown.enter.native="initEmps"
                              :disabled="showAdvance"
                              :clearable="true" @clear="initEmps"
                              prefix-icon="el-icon-search" placeholder="输入员工姓名进行搜索">
                    </el-input>
                    <el-button size="small" type="primary" :plain="true" icon="el-icon-search"
                               @click="initEmps" :disabled="showAdvance">搜索
                    </el-button>

                    <el-button type="primary" size="small" @click="showAdvance=!showAdvance">
                        <i :class="showAdvance? 'fa fa-address-card-o' : 'fa fa-address-card'"
                           :aria-hidden="true"></i>
                        高级搜索
                    </el-button>

                </div>
                <div style="display:flex;margin-right:600px">
                    <div>
                        <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                multiple>
                            <el-button round size="small" style="background-color: #c3a420"><i class="fa fa-level-up"
                                                                                               style="color: #fff902;"
                                                                                               aria-hidden="true"></i><i
                                    style="color: #fdfffb">&nbsp;&nbsp;导入数据</i></el-button>
                            <div slot="tip" class="el-upload__tip">只能上传exc文件，且不超过500kb &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                        </el-upload>
                    </div>
                    <div>
                        <el-button @click="exportData" round size="small"
                                   style="background-color: #c36352;margin-left: -105px"><i class="fa fa-level-down"
                                                                                            style="color: #fffb00;"
                                                                                            aria-hidden="true"></i><i
                                style="color: #fdfffb">&nbsp;&nbsp;导出数据</i></el-button>
                    </div>
                    <div>
                        <el-button round size="small" style="background-color: #925ec3;color: white;margin-left: 5px"
                                   icon="el-icon-plus"
                                   @click="showAddEmp">添加员工
                        </el-button>
                    </div>
                    <div>
                        <el-button size="small" icon="el-icon-printer"
                                   style="background-color: #2ec35b;color: white;margin-left: 10px" round
                                   v-print>打印
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
        <transition name="bounce">
            <div v-show="showAdvance"
                 style="border: 1px solid rgba(255,190,205,0.54);border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 5px 0px;background-color: rgba(255,167,129,0.71)">
                <el-row>
                    <el-col :span="5">政治面貌：
                        <el-select v-model="searchValue.politicId" placeholder="请选择" style="width: 130px" size="mini"
                                   clearable>
                            <el-option
                                    v-for="item in politicals"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">民族：
                        <el-select v-model="searchValue.nationId" placeholder="请选择" style="width: 130px" size="mini"
                                   clearable>
                            <el-option
                                    v-for="item in nations"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">职位：
                        <el-select v-model="searchValue.posId" placeholder="请选择" style="width: 130px" size="mini"
                                   clearable>
                            <el-option
                                    v-for="item in positions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">职称：
                        <el-select v-model="searchValue.jobLevelId" placeholder="请选择" style="width: 130px" size="mini"
                                   clearable>
                            <el-option
                                    v-for="item in joblevels"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="7">聘用形式：
                        <el-radio-group v-model="searchValue.engageForm" size="mini" style="padding-top: 2px">
                            <el-radio label="劳务合同">劳务合同</el-radio>
                            <el-radio label="劳动合同">劳动合同</el-radio>
                            <el-radio label="三方协议">三方协议</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <el-col :span="5">所属部门：
                        <el-popover
                                placement="right"
                                title="选择部门"
                                width="230"
                                trigger="manual"
                                v-model="visible2">
                            <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                     @node-click="searchNodeClick"></el-tree>
                            <div style="width: 130px;height: 25px;display: inline-flex;background-color:white;border: 1px solid #fdfffb;
                            border-radius: 3px; margin-top: 2px;cursor: pointer;box-sizing:border-box "
                                 slot="reference" @click="showDep2">
                    <span style="line-height: 25px;margin-left: 11px;font-size: 12px">
                      <i class="el-icon-star-off" style="align-items: center ">{{inputDepName}}</i>
                    </span>
                            </div>
                        </el-popover>
                    </el-col>
                    <el-col :span="5">入职日期：
                        <el-date-picker
                                v-model="searchValue.beginDateScope"
                                type="daterange"
                                size="mini"
                                range-separator="至"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                style="width: 240px"
                                start-placeholder="选择日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="5">出生日期:
                        <el-date-picker
                                v-model="searchValue.birthdayScope"
                                type="daterange"
                                size="mini"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                range-separator="至"
                                style="width: 240px"
                                start-placeholder="选择日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="4">学历：
                        <el-select v-model="searchValue.tiptopDegree" placeholder="请选择" size="mini" clearable>
                            <el-option
                                    v-for="item in tiptop"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-button size="mini" @click="quxiaoBtn" round>取消</el-button>
                        <el-button size="mini" round @click="initEmps('advanced')">搜索</el-button>
                    </el-col>
                </el-row>
            </div>
        </transition>
        <div>
            <el-table
                    id="printMe"
                    :data="emps"
                    stripe
                    border
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255, 255, 255, 0.8)"
                    style="width: 100%;margin-top: 10px">
                <el-table-column
                        type="selection"
                        width="40">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="emname"
                        label="姓名"
                        width="90"
                        fixed="left">
                </el-table-column>
                <el-table-column
                        prop="workID"
                        label="工号"
                        align="center"
                        width="88">
                </el-table-column>
                <el-table-column
                        prop="gender"
                        align="center"
                        label="性别"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="birthday"
                        label="出生日期"
                        align="center"
                        width="110">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="身份证号"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="wedlock"
                        label="婚姻状况"
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="nation.name"
                        label="民族"
                        align="center"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="nativePlace"
                        label="籍贯"
                        align="center"
                        width="95">
                </el-table-column>
                <el-table-column
                        prop="political.name"
                        label="政治面貌"
                        align="center"
                        width="95">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        align="center"
                        width="155">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号码"
                        align="center"
                        width="114">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="联系地址"
                        align="center"
                        width="265">
                </el-table-column>
                <el-table-column
                        prop="department.name"
                        label="所属部门"
                        align="center"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="jobLevel.name"
                        label="职称"
                        align="center"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="position.name"
                        label="职位"
                        align="center"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="engageForm"
                        label="聘用形式"
                        align="center"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="tiptopDegree"
                        label="学历"
                        align="center"
                        width="85">
                </el-table-column>
                <el-table-column
                        prop="specialty"
                        label="专业"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="school"
                        label="毕业学校"
                        align="center"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="workState"
                        label="在职状态"
                        align="center"
                        width="78">
                </el-table-column>
                <el-table-column
                        prop="beginDate"
                        label="入职日期"
                        align="center"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="conversionTime"
                        label="转正日期"
                        align="center"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="beginContract"
                        label="合同起始日期"
                        align="center"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="endContract"
                        label="合同终止日期"
                        align="center"
                        width="100">
                </el-table-column>
                <el-table-column
                        label="合同期限"
                        align="center"
                        width="95">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.contractTerm}}</el-tag>&nbsp;&nbsp;年
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="240"
                        align="center"
                        fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="showEditEmp(scope.row)" style="padding: 10px">编辑</el-button>
                        <el-button style="padding: 10px" @click="addEmpAdmin(scope.row)">添加账号</el-button>
                        <el-button type="danger" style="padding: 10px" @click="deleteEmp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: flex-end;margin-top: 15px">
                <el-pagination
                        background
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="70%">
            <div>
                <el-form ref="empForm" :model="emp" :rules="rules">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名:" prop="emname">
                                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-edit"
                                          v-model="emp.emname" placeholder="输入员工姓名"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="性别:" prop="gender">
                                <el-radio-group v-model="emp.gender" size="mini" style="padding-top: 11px">
                                    <el-radio label="男">男</el-radio>
                                    <el-radio label="女">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="出生日期:" prop="birthday">
                                <el-date-picker
                                        v-model="emp.birthday"
                                        type="date"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 150px"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="身份证号:" prop="idCard">
                                <el-input type="text" size="mini" prefix-icon="el-icon-user-solid"
                                          v-model="emp.idCard" maxlength="18" placeholder="输入身份证号"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="婚姻状况:" prop="wedlock">
                                <el-radio-group v-model="emp.wedlock" style="padding-top: 11px" size="mini">
                                    <el-radio label="已婚">已婚</el-radio>
                                    <el-radio label="未婚">未婚</el-radio>
                                    <el-radio label="离异">离异</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="民族:" prop="nationId">
                                <el-select v-model="emp.nationId" placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in nations"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="政治面貌:" prop="politicId">
                                <el-select v-model="emp.politicId" placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in politicals"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="籍贯:" prop="nativePlace">
                                <el-input size="mini"
                                          prefix-icon="el-icon-edit" v-model="emp.nativePlace"
                                          placeholder="输入籍贯">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <el-form-item label="邮箱:" prop="email">
                                <el-input size="mini" v-model="emp.email" prefix-icon="el-icon-s-promotion"
                                          placeholder="输入邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="手机号码:" prop="phone">
                                <el-input type="text" prefix-icon="el-icon-phone" size="mini"
                                          v-model="emp.phone" maxlength="11" placeholder="输入手机号码"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职位:" prop="posId">
                                <el-select v-model="emp.posId" placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in positions"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="联系地址:" prop="address">
                                <el-input type="text" prefix-icon="el-icon-s-opportunity" size="mini"
                                          v-model="emp.address" placeholder="输入联系地址"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="所属部门:" prop="departmentId">
                                <el-popover
                                        placement="right"
                                        title="选择部门"
                                        width="230"
                                        trigger="manual"
                                        v-model="visible">
                                    <el-tree default-expand-all :data="allDeps" :props="defaultProps"
                                             @node-click="handleNodeClick"></el-tree>
                                    <div style="width: 200px;height: 25px;display: inline-flex;border: 1px solid #ccc;
                            border-radius: 3px; margin-top: 2px;cursor: pointer;box-sizing:border-box "
                                         slot="reference" @click="showDep">
                    <span style="line-height: 25px;margin-left: 11px;font-size: 12px">
                      <i class="el-icon-star-off" style="align-items: center ">{{inputDepName}}</i>
                    </span>
                                    </div>
                                </el-popover>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-form-item label="职称:" prop="jobLevelId">
                                <el-select v-model="emp.jobLevelId" placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in joblevels"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="学历:" prop="tiptopDegree">
                                <el-select v-model="emp.tiptopDegree" placeholder="请选择" size="mini">
                                    <el-option
                                            v-for="item in tiptop"
                                            :key="item"
                                            :label="item"
                                            :value="item">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="聘用形式:" prop="engageForm">
                                <el-radio-group v-model="emp.engageForm" size="mini" style="padding-top: 8px">
                                    <el-radio label="劳务合同">劳务合同</el-radio>
                                    <el-radio label="劳动合同">劳动合同</el-radio>
                                    <el-radio label="三方协议">三方协议</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="5">
                            <el-form-item label="工号:" prop="workID">
                                <el-input v-model="emp.workID" size="mini" placeholder="员工号" disabled
                                          style="width: 180px;" prefix-icon="el-icon-edit"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="毕业学校:" prop="school">
                                <el-input v-model="emp.school" size="mini"
                                          style="width: 200px"
                                          prefix-icon="el-icon-s-home" placeholder="输入学校名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="入职日期:" prop="beginDate">
                                <el-date-picker
                                        v-model="emp.beginDate"
                                        type="date"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 240px"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="专业方向:" prop="specialty">
                                <el-input v-model="emp.specialty" size="mini"
                                          prefix-icon="el-icon-setting" placeholder="输入专业"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="转正日期:" prop="conversionTime">
                                <el-date-picker
                                        v-model="emp.conversionTime"
                                        type="date"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 200px"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同开始日期:" prop="beginContract">
                                <el-date-picker
                                        v-model="emp.beginContract"
                                        type="date"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 200px"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="合同结束日期:" prop="endContract">
                                <el-date-picker
                                        v-model="emp.endContract"
                                        type="date"
                                        size="mini"
                                        value-format="yyyy-MM-dd"
                                        style="width: 200px"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEmp">确 定</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "EmpBasic",
        data() {
            return {
                searchValue: {
                    politicId: null,
                    nationId: null,
                    posId: null,
                    departmentId: null,
                    jobLevelId: null,
                    engageForm: '',
                    birthdayScope: '',
                    beginDateScope: null,
                    tiptopDegree: null
                },
                title: '',
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                showAdvance: false,
                inputDepName: '',
                allDeps: [],
                visible: false,
                visible2: false,
                emps: [],
                loading: false,
                total: 0,
                currentPage: 1,
                size: 10,
                emname: '',
                dialogVisible: false,
                nations: [],
                joblevels: [],
                politicals: [],
                positions: [],
                tiptop: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其它'],
                emp: {
                    id: null,
                    emname: '',
                    gender: '',
                    birthday: '',
                    idCard: '',
                    wedlock: '',
                    nationId: '',
                    nativePlace: '',
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: '2099-12-12',
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: null
                },
                rules: {
                    emname: [
                        {required: true, message: '请输入员工名称', trigger: 'blur'}
                    ],
                    birthday: [
                        {required: true, message: '请选择日期', trigger: 'blur'}
                    ],
                    nationId: [
                        {required: true, message: '请选择民族', trigger: 'blur'}
                    ],
                    idCard: [
                        {required: true, message: '请输入身份证号', trigger: 'blur'},
                        {
                            pattern: /^[1-9]\d{7}((0\d)|bai(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
                            message: '身份证号码不正确',
                            trigger: 'blur'
                        }
                    ],
                    nativePlace: [
                        {required: true, message: '请输入籍贯', trigger: 'blur'}
                    ],
                    politicId: [
                        {required: true, message: '请选择政治面貌', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: 'email', message: '邮箱地址格式不正确', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入联系地址', trigger: 'blur'}
                    ],
                    departmentId: [
                        {required: true, message: '请选择部门', trigger: 'blur'}
                    ],
                    jobLevelId: [
                        {required: true, message: '请选择职称', trigger: 'blur'}
                    ],
                    posId: [
                        {required: true, message: '请选择职位', trigger: 'blur'}
                    ],
                    specialty: [
                        {required: true, message: '请输入专业名称', trigger: 'blur'}
                    ],
                    school: [
                        {required: true, message: '请输入毕业学院', trigger: 'blur'}
                    ],
                    beginDate: [
                        {required: true, message: '请选择入职日期', trigger: 'blur'}
                    ],
                    conversionTime: [
                        {required: true, message: '请选择转正日期', trigger: 'blur'}
                    ],
                    beginContract: [
                        {required: true, message: '请选择合同起始日期', trigger: 'blur'}
                    ],
                    endContract: [
                        {required: true, message: '请选择合同终止日期', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.initEmps();
            this.initData();
            this.initPositions();
        },
        methods: {
            exportData() {
                this.downloadRequest('/emp/basic/export ');
            },
            showEditEmp(data) {
                this.title = '编辑员工信息';
                this.emp = data;
                this.inputDepName = data.department.name;
                this.initPositions();
                this.dialogVisible = true;
            },
            addEmpAdmin(data){
                this.postRequest('/emp/basic/add/'+data.id).then(resp=>{
                    if (resp){
                        this.initEmps();
                    }
                })
            },
            deleteEmp(data) {
                this.$confirm('此操作将永久删除该[' + data.emname + ']员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/emp/basic/' + data.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            addEmp() {
                if (this.emp.id) {
                    this.$refs['empForm'].validate(valid => {
                        if (valid) {
                            this.putRequest('/emp/basic/', this.emp).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                } else {
                    this.$refs['empForm'].validate(valid => {
                        if (valid) {
                            this.postRequest('/emp/basic/', this.emp).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initEmps();
                                }
                            })
                        }
                    })
                }

            },
            handleNodeClick(data) {
                this.inputDepName = data.name;
                this.emp.departmentId = data.id;
                this.visible = !this.visible;
            },
            showDep() {
                this.visible = !this.visible;
            },
            showDep2() {
                this.visible2 = !this.visible2;
            },
            quxiaoBtn() {
                this.showAdvance = false;
                this.searchValue = {
                    politicId: null,
                    nationId: null,
                    posId: null,
                    departmentId: null,
                    jobLevelId: null,
                    engageForm: '',
                    birthdayScope: '',
                    beginDateScope: null,
                    tiptopDegree: null
                }
            },
            initData() {
                if (!window.sessionStorage.getItem('nations')) {
                    this.getRequest('/emp/basic/nations').then(resp => {
                        if (resp) {
                            this.nations = resp;
                            window.sessionStorage.setItem('nations', JSON.stringify(resp));
                        }
                    })
                } else {
                    this.nations = JSON.parse(window.sessionStorage.getItem('nations'));
                }
                if (!window.sessionStorage.getItem('joblevels')) {
                    this.getRequest('/emp/basic/joblevels').then(resp => {
                        if (resp) {
                            this.joblevels = resp;
                            window.sessionStorage.setItem('joblevels', JSON.stringify(resp));
                        }
                    })
                } else {
                    this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'));
                }
                if (!window.sessionStorage.getItem('politicals')) {
                    this.getRequest('/emp/basic/political').then(resp => {
                        if (resp) {
                            this.politicals = resp;
                            window.sessionStorage.setItem('politicals', JSON.stringify(resp));
                        }
                    })
                } else {
                    this.politicals = JSON.parse(window.sessionStorage.getItem('politicals'));
                }
                if (!window.sessionStorage.getItem('allDeps')) {
                    this.getRequest('/emp/basic/deps').then(resp => {
                        if (resp) {
                            this.allDeps = resp;
                            window.sessionStorage.setItem('allDeps', JSON.stringify(resp));
                        }
                    })
                } else {
                    this.allDeps = JSON.parse(window.sessionStorage.getItem('allDeps'));
                }
            },
            getMaxWorkId() {
                this.getRequest('/emp/basic/mxsWorkID').then(resp => {
                    if (resp) {
                        this.emp.workID = resp.obj;
                    }
                })
            },
            initPositions() {
                this.getRequest('/emp/basic/positions').then(resp => {
                    if (resp) {
                        this.positions = resp;
                    }
                })
            },
            searchNodeClick(data) {
                this.inputDepName = data.name;
                this.searchValue.departmentId = data.id;
                this.visible2 = !visible;
            },
            showAddEmp() {
                this.title = '添加员工';
                this.inputDepName = '';
                this.emp = {
                    id: null,
                    emname: '',
                    gender: '',
                    birthday: '',
                    idCard: '',
                    wedlock: '',
                    nationId: '',
                    nativePlace: '',
                    politicId: null,
                    email: '',
                    phone: '',
                    address: '',
                    departmentId: null,
                    jobLevelId: null,
                    posId: null,
                    engageForm: '',
                    tiptopDegree: '',
                    specialty: '',
                    school: '',
                    beginDate: '',
                    workState: '在职',
                    workID: '',
                    contractTerm: null,
                    conversionTime: '',
                    notWorkDate: '2099-12-12',
                    beginContract: '',
                    endContract: '',
                    workAge: null,
                    salaryId: 1
                };
                this.getMaxWorkId();
                this.initPositions();
                this.dialogVisible = true;
            },
            sizeChange(size) {
                this.size = size;
                this.initEmps();
            },
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.initEmps();
            },
            initEmps(type) {
                this.loading = true;
                let url = '/emp/basic/?currentPage=' + this.currentPage + '&size=' + this.size;
                if (type && type == 'advanced') {
                    if (this.searchValue.politicId) {
                        url += '&politicId=' + this.searchValue.politicId;
                    }
                    if (this.searchValue.posId) {
                        url += '&posId=' + this.searchValue.posId;
                    }
                    if (this.searchValue.nationId) {
                        url += '&nationId=' + this.searchValue.nationId;
                    }
                    if (this.searchValue.jobLevelId) {
                        url += '&jobLevelId=' + this.searchValue.jobLevelId;
                    }
                    if (this.searchValue.engageForm) {
                        url += '&engageForm=' + this.searchValue.engageForm;
                    }
                    if (this.searchValue.tiptopDegree) {
                        url += '&tiptopDegree=' + this.searchValue.tiptopDegree;
                    }
                    if (this.searchValue.departmentId) {
                        url += '&departmentId=' + this.searchValue.departmentId;
                    }
                    if (this.searchValue.beginDateScope) {
                        url += '&beginDateScope=' + this.searchValue.beginDateScope;
                    }
                } else {
                    url += '&emname=' + this.emname;
                }
                this.getRequest(url).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.emps = resp.data;
                        this.total = resp.total;
                    }
                })
            }
        }
    }
</script>

<style>
    .bounce-enter-active {
        animation: bounce-in .5s;
    }

    .bounce-leave-active {
        animation: bounce-in .5s reverse;
    }

    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }
</style>